.new-menu-wrap{
  z-index: 0;
  position: relative;
  overflow-y: hidden;
  height: 100vh;
  .new-menu-company-logo{
    height: 56px;
    line-height: 56px;
    text-align: center;
    background: #14234A;
  }
  .new-menu-horizontal-menu{
    position: absolute;
    top: 0;
    right: 0;
    height: 56px;
    line-height: 56px;
    text-align: left;
    padding-left: 20px;
    background: #14234A;
    transition: all 0.2s ease;
    min-width: 800px;
  }
  .new-menu-vertical-menu{
    overflow: hidden;
    transition: all 0.2s ease;
  }
  .new-menu-horizontal-tabs{
    width: calc(100% - 215px);
    overflow: auto;
    z-index: 0;
    position: relative;
  }
  .horizontal-menu-header{
    position: absolute;
    top: 0;
    right: 0;
    color: #CDD7EC;
    line-height: 56px;
    .user-info{
      color: #CDD7EC;
      vertical-align: top;
      .user-avatar{
        vertical-align: top;
      }
    }
  }
  .show-category-border{
    border-top: 1px solid #DBE6F3;
  }
  .show-category-border-margin{
    margin-right: 10px;
  }
  .new-menu-breadcrumb{
    z-index: 2;
    position: absolute;
    top: 56px;
    right: 0;
    height: 32px;
    background: #F7F8FA;
    padding-left: 20px;
    transition: all 0.2s ease;
    min-width: 800px;
    .breadcrumb{
      color: #848C95;
      font-size: 12px;
    }
    .breadcrumb-item{
      color: #848C95;
      line-height: 32px;
      font-size: 12px;
      &:hover{
        color: #1F70FC;
      }
    }
    .last-breadcrumb{
      font-size: 12px;
      line-height: 32px;
      color: #4E5B71;
    }
  }
  .menu-body-container{
    z-index: 0;
    padding: 16px 0;
    height: calc(100vh - 56px);
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    background: white;
    border-right: 1px solid #DBE6F3;
  }
  .company-name{
    background: #14234A;
    font-size: 12px;
    color: #FFFFFF;
    height: 56px;
    line-height: 56px;
    padding: 0 12px 0 18px;
    text-align: center;
    &:hover {
      cursor: pointer;
    }
    .name {
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .menu-search{
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    input{
      height: 32px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
  }
  .close-circle{
    color: rgba(188, 200, 212,0.5);
    font-size: 12px;
    cursor: pointer;
  }
  .svg-menu-icon{
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: #6C788C;
    fill: currentColor;
    font-size: 16px;
    margin-right: 20px;
    cursor: pointer;
    vertical-align: middle;
    &:hover {
      color: #1F70FC;
    }
  }
  .approve-menu-item{
    position: relative;
    width: 100%;
  }
  .workflow-management{
    position: relative;
  }
  .approve-red-dot{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FF4C6A;
    position: absolute;
    top: -2px;
    right: -8px;
  }
  .approve-num{
    height: 16px;
    padding: 0 5px;
    color: white;
    background: #FF5572;
    border-radius: 20px;
    position: absolute;
    right: 0;
    top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .approve-num-search{
    right: 33px;
  }
  .hove-menu-item{
    margin: 0 -33px 0 -23px;
    background: #edf3ff;
    padding-left: 23px;
  }
  .hove-menu-item:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-color: #4b8dff;
    border-left: 3px solid #1890ff;
  }
  .menu-footer-container {
    z-index: 3;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: white;
    border-top: 1px solid #DBE6F3;
    transition: all 0.2s ease;
  }
  .menu-footer-fold{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    transition: all 0.2s ease;
  }
  .menu-footer-unfold{
    width: 55px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transition: all 0.2s ease;
  }
  .menu-footer-unfold-new{
    width: 55px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .vertical-icon-area, .icon-area {
    cursor: pointer;
    &:hover {
      color: #1F70FC;
    }
  }
  .all-menu-list{
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    padding-right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 100px);
    transition: all 0.2s ease;
  }
  .all-menu-list-collapsed{
    width: 70px;
    transition: all 0.2s ease;
  }
  .menu-search-fold{
    .ant-input-affix-wrapper .ant-input:not(:last-child){
      padding-right: 5px;
    }
  }
  .search-result-menu, .no-result-menu{
    position: absolute;
    top: 50px;
    right: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 100px);
  }
  .no-result-menu{
    text-align: center;
    margin-top: 50px;
  }
  .new-menu-vertical-menu .ant-menu-item-active, .new-menu-vertical-menu .ant-menu-item:hover,
  .new-menu-vertical-menu .ant-menu-submenu-active, .new-menu-vertical-menu .ant-menu-submenu-title:hover,
  .new-menu-vertical-menu .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
  .new-menu-vertical-menu .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
    .svg-menu-icon{
      color: #1F70FC;
    }
  }
  .new-menu-horizontal-menu .ant-tabs-nav .ant-tabs-tab{
    color: #CDD7EC;
    padding: 17px 0 8px;
    &:hover{
      color: #ffffff;
    }
  }
  .new-menu-horizontal-menu .ant-tabs-nav .ant-tabs-tab-active{
    color: #FFFFFF;
  }
  .new-menu-horizontal-menu .ant-tabs-bar{
    border-bottom: none;
  }
  .new-menu-horizontal-menu .ant-tabs-ink-bar{
    background-color: #FFFFFF;
  }
  .ant-layout-sider-collapsed{
    .new-menu-vertical-menu{
      width: 56px;
    }
  }
  .tab-name-block{
    font-size: 10px;
    color: #848c95;
    line-height: 16px;
    width: 90%;
  }
  .all-menu-list .ant-menu-inline .ant-menu-submenu-title,
  .all-menu-list .ant-menu-inline .ant-menu-item{
    width: 220px;
  }
  .all-menu-list .ant-menu-inline-collapsed > .ant-menu-item,
  .all-menu-list .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title{
    width: 56px;
    transition: all 0.2s ease;
  }
  .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-inline > .ant-menu-item{
    padding-left: 20px !important;
  }
  .ant-menu-inline .ant-menu-submenu > .ant-menu-inline > .ant-menu-item{
    padding-left: 56px !important;
  }
  .search-result-menu .ant-menu-inline .ant-menu-submenu > .ant-menu-inline > .ant-menu-item{
    padding-left: 20px !important;
    .single-f-menu{
      padding-left: 14px;
      height: 48px;
      line-height: 48px;
    }
    .hove-menu-item{
      padding-left: 37px;
      height: 48px;
      line-height: 48px;
    }
    .hove-menu-item-has-tab{
      height: 64px;
      padding: 12px 0 12px 37px;
      line-height: 24px;
      background: #edf3ff;
      margin: 0 -33px 0 -23px;
    }
    .show-tab-name{
      height: 64px;
      padding: 12px 0 12px 14px;
      line-height: 24px;
    }
  }
  .all-menu-list .ant-menu-inline-collapsed{
    width: 56px !important;
  }
  .all-menu-list .ant-menu-inline-collapsed > .ant-menu-item,
  .all-menu-list .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title,
  .all-menu-list .ant-menu-inline .ant-menu-submenu-title,
  .all-menu-list .ant-menu-inline .ant-menu-item{
    padding: 0 20px !important;
    height: auto;
    line-height: 48px;
    .show-tab-name{
      height: 64px;
      padding: 12px 0 12px 0;
      line-height: 24px;
    }
    .hove-menu-item-has-tab{
      height: 64px;
      padding: 12px 0 12px 23px;
      line-height: 24px;
      background: #edf3ff;
      margin: 0 -33px 0 -23px;
    }
  }
  .all-menu-list .ant-menu-inline, .all-menu-list .ant-menu-vertical, .all-menu-list .ant-menu-vertical-left{
    border-right: none;
  }
  .all-menu-list .ant-menu-inline-collapsed .ant-menu-item :hover{
    //background: #FAFAFA;
  }
  .ant-menu-inline .ant-menu-item:after{
    border-right: none;
  }
  .ant-menu-inline-collapsed .ant-menu-item-selected:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-color: #4b8dff;
    border-left: 3px solid #1890ff;
  }
  .ant-menu-inline .ant-menu-item-selected:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-color: #4b8dff;
    border-left: 3px solid #1890ff;
  }
  .new-menu-sider{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
  }
}
.helios-main-220 .menu-footer-container{
  width: 219px;
}
.helios-main-250 .menu-footer-container{
  width: 249px;
}
.helios-main-220 .menu-submenu-title{
  width: 170px;
}
.helios-main-250 .menu-submenu-title{
  width: 200px;
}
.helios-main-220 .all-menu-list{
  width: 237px;
}
.helios-main-250 .all-menu-list{
  width: 267px;
}
.helios-content-wrapper{
  position: relative;
}
.hide-left-menu{
  .menu-body-container{
    display: none;
  }
  .helios-content, .new-menu-breadcrumb{
    left: 0;
  }
}
.helios-main-250 .new-menu-wrap .all-menu-list .ant-menu-inline .ant-menu-item,
.helios-main-250 .new-menu-wrap .all-menu-list .ant-menu-inline .ant-menu-submenu-title{
  width: 250px;
}
.ant-menu-inline-collapsed-tooltip .svg-menu-icon {
  display: none;
}

